<!doctype html>
<!--html:5 或者! tab一键生成-->
<html lang="en">
<head>
<!--  meta:utf  -->
    <meta charset="UTF-8">
<!--  meta:vp  -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--  meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--    link:css-->
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<!--    script:src-->
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<body>

<p>1.生成带类样式的标签</p>
<p class="info">p.info</p>
<p class="red">p.red</p>
<div class="red">.red</div>

<p>2.生成带id的标签</p>
<h2 id="header">h2#header</h2>
<div id="header1">#header1</div>

<p>a标签</p>
<a href="http://">a:link</a>
<a href="mailto:">a:mail</a>

<!--生成兄弟标签 h2.header+p.info-->
<h2 class="header"></h2>
<p class="info"></p>

<!--后代标签 ul>li+li+li-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--生成当前标签的父标签 h2>span^p.info-->
<h2><span></span></h2>
<p class="info"></p>

<!--同时创建文本 a{php.cn}-->
<a href="">php.cn</a>
<p title="文本">p[title='文本']</p>

<!--重复生成功能 ul>li*3-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--生成一个有八个列表项的导航 ul.list>li.item*8>a{导航}-->
<ul class="list">
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
</ul>

<!--给标签自动加编号和排序 ul.list>li.item*8>a{导航$$}-->
<ul class="list">
    <li class="item"><a href="">导航01</a></li>
    <li class="item"><a href="">导航02</a></li>
    <li class="item"><a href="">导航03</a></li>
    <li class="item"><a href="">导航04</a></li>
    <li class="item"><a href="">导航05</a></li>
    <li class="item"><a href="">导航06</a></li>
    <li class="item"><a href="">导航07</a></li>
    <li class="item"><a href="">导航08</a></li>
</ul>

<!--ul.list>li.item*8>a{导航$}-->
<ul class="list">
    <li class="item"><a href="">导航1</a></li>
    <li class="item"><a href="">导航2</a></li>
    <li class="item"><a href="">导航3</a></li>
    <li class="item"><a href="">导航4</a></li>
    <li class="item"><a href="">导航5</a></li>
    <li class="item"><a href="">导航6</a></li>
    <li class="item"><a href="">导航7</a></li>
    <li class="item"><a href="">导航8</a></li>
</ul>

<!--ul.list>li.item*8>a{导航$$@100}-->
<ul class="list">
    <li class="item"><a href="">导航100</a></li>
    <li class="item"><a href="">导航101</a></li>
    <li class="item"><a href="">导航102</a></li>
    <li class="item"><a href="">导航103</a></li>
    <li class="item"><a href="">导航104</a></li>
    <li class="item"><a href="">导航105</a></li>
    <li class="item"><a href="">导航106</a></li>
    <li class="item"><a href="">导航107</a></li>
</ul>

<!--ul.list>li.item*8>a{导航$$$$@100}-->
<ul class="list">
    <li class="item"><a href="">导航0100</a></li>
    <li class="item"><a href="">导航0101</a></li>
    <li class="item"><a href="">导航0102</a></li>
    <li class="item"><a href="">导航0103</a></li>
    <li class="item"><a href="">导航0104</a></li>
    <li class="item"><a href="">导航0105</a></li>
    <li class="item"><a href="">导航0106</a></li>
    <li class="item"><a href="">导航0107</a></li>
</ul>


</body>
</html>